import { useNavigate } from "react-router-dom";

import Micons from "@/components/MIcons/index";

const HomeTotal = (props: any) => {
  const { openModal } = props;

  const navigate = useNavigate();

  function handleClick(url: string) {
    navigate(url);
  }
  return (
    <div className="home-total frame-box">
      <div className="telegram-iocn">
        <img src="./images/telegram.png" />
      </div>
      {/* 签到 */}
      <div className="sign-in">
        <div
          className="btn"
          onClick={() => {
            openModal(2);
          }}
        >
          Check-In
        </div>
      </div>

      <div className="item-box">
        <div className="item-content" style={{ width: "80%" }}>
          <div className="d-c-c left-icon">
            <img src="/images/coin.png" />
          </div>
          <div className="num bold">1.534,713</div>
          <div className="unit">KnowsCoin</div>
          <div
            className="r-arrow"
            onClick={() => {
              handleClick("/home/record");
            }}
          >
            <Micons
              type="extend"
              className="icon-gengduo"
              colorFill="#a7a7a7"
            />
          </div>
        </div>
      </div>

      <div className="d-c-b mt2">
        <div className="item-box diamond-box">
          <div className="item-name">Total Network Hashrate</div>
          <div className="item-content \">
            <div className="num">32,792,232</div>
            <div className="unit">H/s</div>
          </div>
        </div>
        <div className="item-box">
          <div className="item-name">
            <span>Personal Hashrate</span>
            <div
              className="r-arrow"
              onClick={() => {
                handleClick("/home/record");
              }}
            >
              <Micons
                type="extend"
                className="icon-gengduo"
                colorFill="#a7a7a7"
              />
            </div>
          </div>
          <div className="item-content">
            <div className="num"> 22,232</div>
            <div className="unit">H/s</div>
          </div>
        </div>
      </div>

      <div className="bottom-list">
        <div
          className="help-btn"
          onClick={() => {
            openModal(1);
          }}
        >
          <Micons type="extend" className="icon-bangzhu" colorFill="#ea991a" />
        </div>
        <ul>
          <li>
            <span className="name">RH</span>
            <span className="num">10</span>
            <span className="unit">H/s</span>
          </li>
          <li>
            <span className="name">TH</span>
            <span className="num">10</span>
            <span className="unit">H/s</span>
          </li>
          <li>
            <span className="name">PRH</span>
            <span className="num">10</span>
            <span className="unit">H/s</span>
          </li>
          <li>
            <span className="name">NH</span>
            <span className="num">12,000</span>
            <span className="unit">H/s</span>
          </li>
        </ul>
      </div>
    </div>
  );
};
export default HomeTotal;
